JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at ways to find items in arrays that aren’t primitive values or items inside non-array iterable objects.
Finding Array Items That aren’t Primitive Values
To find array items that aren’t primitive values, we can’t use the indexOf method as it compares the values using the === operator when it’s doing the search.
Instead, we need to use the find or findIndex method. Both methods take a callback that takes the array entry as a parameter and returns a boolean expression with the condition of the element that we’re looking for.
The find method returns the first occurrence of an object with the given condition.
For instance, we can use the find method as follows:
const arr = [{
user: 'foo',
active: true
},
{
user: 'bar',
active: false
},
];
const user = arr.find(a => a.active);
In the code above, we have the arr array with objects that have the user and active properties.
Then we used the find method to find the first occurrence of an object that has active set to true .
Then we should see that user is {user: “foo”, active: true} because that’s the first one that has active set to true .
The callback for the find method can also take the array index that’s being looped through and the array itself as the 2nd and 3rd parameters respectively.
It can also take an object that’ll be set as the value of this in the callback as an optional 2nd argument if we wish to change it.
findIndex is like find except that it returns the index of the entry of the first occurrence of something with the condition returned in the callback.
For instance, we can use it as follows:
const arr = [{
user: 'foo',
active: true
},
{
user: 'bar',
active: false
},
];
const index = arr.findIndex(a => a.active);
Then index is 0 since that’s the first entry that has the active property set to true .
The arguments for findIndex is the same as find . Also, the callback parameters are also the same as find .
Finding Items That are In Non-Array Iterable Objects
We can find items that are in non-array iterable objects by converting them to arrays first and then using an array instance’s methods to find an item.
For instance, we can use this strategy to find items in a NodeList object since it’s a non-array iterable object.
We can convert a NodeList into an array by using the spread operator. For instance, we can write the following code to find an item with the class foo as follows:
const foo = [...document.body.children].find(c => c.className === 'foo')
In the code above, we want to search for the element with the class foo from the given HTML:
<p class='foo'>
foo
</p>
<p>
bar
</p>
<p>
baz
</p>
We do that by getting the child elements of document.body by using the children property, which is a NodeList. A NodeList isn’t an array, but it’s an iterable object.
Therefore, we can use the spread operator to convert it to an array and then do the search with the array instance’s find method to do the search.
In the callback, we check for the className property of the element to see if it’s 'foo' .
Since we do have an element with class foo , find will return the element with such a class.
Therefore, the value of variable foo is the HTML element object with the class 'foo' .
For array-like objects that aren’t iterable. That is, objects that has the length property and numbers as keys, we can use the Array.from to convert it to an object.
For instance, we if we have:
const arrLike = {
0: 'foo',
1: 'bar',
2: 'baz',
3: 'qux',
length: 5
};
Then we can write:
const arr = Array.from(arrLike);
to convert it to an array. Then we can use array instance methods to do the searches.
Conclusion
If we want to search for items that aren’t primitive values, then we can use the find or findIndex to search for items. They take callbacks so that we can use them to look for items in the given array.
To search for items in array-like or non-array iterable objects, we can convert them to arrays with the Array.from or the spread operator respective. This way, we can use array methods to look for items.
